<template>
  <!-- 轮播 -->
  <el-carousel height=550px trigger="click" arrow="always">
    <el-carousel-item class="image" v-for="item in images" :key="item.id">
      <img :src="item.url" width="100%" height="100%" alt="无图片" />
    </el-carousel-item>
  </el-carousel>
</template>
  
<script>
export default {
  name: "Carousel",
  data() {
    return {
      bannerH: 450,
      images: [
        { id: 1, url: require("@/assets/ad1.jpg") },
        { id: 2, url: require("@/assets/ad2.jpg") },
        { id: 3, url: require("@/assets/ad3.jpg") },
        { id: 4, url: require("@/assets/ad4.jpg") },
        { id: 5, url: require("@/assets/ad5.jpg") },
      ],
    };
  },
  mounted() {
    window.addEventListener(
      "resize",
      () => {
        this.setBannerH();
      },
      false
    );
  },
  methods: {
    //设置走马灯高度
    // setBannerH() {
    //   this.bannerH = document.body.clientWidth / 4;
    // },
  },
};
</script>
  
<style scoped>
.el-carousel {
  overflow-x: hidden;
  overflow-y: hidden;
}

.image {
  height: 550px;
}
</style>
  